<template>
	<view class="content">
    <view class="innerContent">
      <u--form
        :labelWidth="200"
        labelPosition="left"
        :model="modelTah"
        :rules="rulesTah"
        ref="tahForm"
      >
        <u-form-item
          label="间隔单位/s"
          prop="tahModel.collectionInterval"
          borderBottom
          ref="item2"
        >
          <u--input
            v-model="modelTah.tahModel.collectionInterval"
            placeholder="请输入间隔单位"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          label="湿度下限告警"
          borderBottom
          ref="item2"
        >
          <u-radio-group
            v-model="modelTah.tahModel.enableHumLowerAlarm"
            @change="changeYes('a')"
            placement="row">
            <u-radio
              @change="changeYes('a')"
              v-for="(item, index) in radiolistChangeYes"
              :key="index"
              activeColor="red"
              :label="item.name"
              :name="item.name"
              size="30"
              iconSize="24"
              labelSize="30"></u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item
          label="湿度上限告警"
          borderBottom
          ref="item2"
        >
          <u-radio-group
            v-model="modelTah.tahModel.enableHumUpperAlarm"
            @change="changeYes('b')"
            placement="row">
            <u-radio
              @change="changeYes('b')"
              v-for="(item, index) in radiolistChangeYes"
              :key="index"
              activeColor="red"
              :label="item.name"
              :name="item.name"
              size="30"
              iconSize="24"
              labelSize="30"></u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item
          label="电量不足告警"
          borderBottom
          ref="item2"
        >
          <u-radio-group
            v-model="modelTah.tahModel.enableQuantityAlarm"
            @change="changeYes('c')"
            placement="row">
            <u-radio
              @change="changeYes('c')"
              v-for="(item, index) in radiolistChangeYes"
              :key="index"
              activeColor="red"
              :label="item.name"
              :name="item.name"
              size="30"
              iconSize="24"
              labelSize="30"></u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item
          label="温度下限告警"
          borderBottom
          ref="item2"
        >
          <u-radio-group
            v-model="modelTah.tahModel.enableTmpLowerAlarm"
            @change="changeYes('d')"
            placement="row">
            <u-radio
              @change="changeYes('d')"
              v-for="(item, index) in radiolistChangeYes"
              :key="index"
              activeColor="red"
              :label="item.name"
              :name="item.name"
              size="30"
              iconSize="24"
              labelSize="30"></u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item
          label="温度下限告警"
          borderBottom
          ref="item2"
        >
          <u-radio-group
            v-model="modelTah.tahModel.enableTmpUpperAlarm"
            @change="changeYes('e')"
            placement="row">
            <u-radio
              @change="changeYes('e')"
              v-for="(item, index) in radiolistChangeYes"
              :key="index"
              activeColor="red"
              :label="item.name"
              :name="item.name"
              size="30"
              iconSize="24"
              labelSize="30"></u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item
          label="湿警下限"
          prop="tahModel.humLowerLimit"
          borderBottom
          ref="item2"
        >
          <u--input
            v-model="modelTah.tahModel.humLowerLimit"
            placeholder="请输入湿警下限"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          label="湿警上限"
          prop="tahModel.humUpperLimit"
          borderBottom
          ref="item2"
        >
          <u--input
            v-model="modelTah.tahModel.humUpperLimit"
            placeholder="请输入湿警上限"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          label="设备id"
          prop="tahModel.id"
          borderBottom
          ref="item2"
        >
          <u--input
            v-model="modelTah.tahModel.id"
            placeholder="请输入设备id"
            disabled
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          label="设备名称"
          prop="tahModel.nickName"
          borderBottom
          ref="item2"
        >
          <u--input
            v-model="modelTah.tahModel.nickName"
            placeholder="请输入设备名称"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          label="超温采集间隔"
          prop="tahModel.overCollectionInterval"
          borderBottom
          ref="item2"
        >
          <u--input
            v-model="modelTah.tahModel.overCollectionInterval"
            placeholder="请输入超温采集间隔"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          label="超温上报间隔"
          prop="tahModel.overUploadInterval"
          borderBottom
          ref="item2"
        >
          <u--input
            v-model="modelTah.tahModel.overUploadInterval"
            placeholder="请输入超温上报间隔"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          label="电量告警阈值"
          prop="tahModel.quantityLimit"
          borderBottom
          ref="item2"
        >
          <u--input
            v-model="modelTah.tahModel.quantityLimit"
            placeholder="请输入电量告警阈值"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          label="报警下限温度"
          prop="tahModel.tmpLowerLimit"
          borderBottom
          ref="item2"
        >
          <u--input
            v-model="modelTah.tahModel.tmpLowerLimit"
            placeholder="请输入报警下限温度"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          label="报警上限温度"
          prop="tahModel.tmpUpperLimit"
          borderBottom
          ref="item2"
        >
          <u--input
            v-model="modelTah.tahModel.tmpUpperLimit"
            placeholder="请输入报警上限温度"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          label="上传间隔"
          prop="tahModel.uploadInterval"
          borderBottom
          ref="item2"
        >
          <u--input
            v-model="modelTah.tahModel.uploadInterval"
            placeholder="请输入上传间隔"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          label="牧场"
          prop="modelTah.ranchId"
          @click="getRanchDefault('sen')"
          borderBottom
          ref="item"
        >
          <u--input
            v-model="modelTah.tahModel.ranchId"
            placeholder="请选择牧场"
            disabled
            disabledColor="#ffffff"
            border="none"
          ></u--input>
          <u-icon
            slot="right"
            name="arrow-right"
          ></u-icon>
        </u-form-item>
        <u-form-item
          label="圈棚"
          prop="tahModel.penId"
          @click="openPenPopup"
          borderBottom
          ref="item"
        >
          <u--input
            v-model="modelTah.tahModel.penId"
            placeholder="请选择圈棚"
            disabled
            disabledColor="#ffffff"
            border="none"
          ></u--input>
          <u-icon
            slot="right"
            name="arrow-right"
          ></u-icon>
        </u-form-item>
        <u-form-item
          label="栏舍"
          prop="tahModel.styId"
          @click="openStyPopup"
          borderBottom
          ref="item"
        >
          <u--input
            v-model="modelTah.tahModel.styId"
            placeholder="请选择栏舍"
            disabled
            disabledColor="#ffffff"
            border="none"
          ></u--input>
          <u-icon
            slot="right"
            name="arrow-right"
          ></u-icon>
        </u-form-item>
        <view class="lastForSwitch">
          <view class="customButton" @click="submitTah">确认修改</view>
        </view>
      </u--form>
      <u-action-sheet
        :show="showRanch"
        :actions="ranchList"
        title="请选择牧场"
        @close="showRanch = false"
        @select="ranchSelect"
      >
      </u-action-sheet>
      <u-action-sheet
        :show="showpen"
        :actions="penList"
        title="请选择圈棚"
        @close="showpen = false"
        @select="penSelect"
      >
      </u-action-sheet>
      <u-action-sheet
        :show="showSty"
        :actions="styList"
        title="请选择栏舍"
        @close="showSty = false"
        @select="stySelect"
      >
      </u-action-sheet>
    </view>
	</view>
</template>

<script>
  import request from './../../request/api';
	export default {
		data() {
			return {
        showRanch: false,
        ranchList: [],
        tagRanchId: '',
        showpen: false,
        penList: [],
        tagPenId: '',
        showSty: false,
        styList: [],
        tagStyId: '',
        modelTah: {
          tahModel: {
            collectionInterval:'',
            enableHumLowerAlarm: '是', // 请选择湿度下限告警
            enableHumUpperAlarm: '是', // 请选择湿度上限告警
            enableQuantityAlarm: '是', // 请选择电量不足告警
            enableTmpLowerAlarm: '是', // 请选择温度下限告警
            enableTmpUpperAlarm: '是', // 请选择温度上限告警
            humLowerLimit: '', // 请输入湿警下限
            humUpperLimit: '', // 请输入湿警上限
            id: '', // 设备id
            nickName: '',// 请输入设备名称
            overCollectionInterval: '', // 请输入超温采集间隔
            overUploadInterval: '', // 请输入超温上报间隔
            quantityLimit: '', // 请输入电量告警阈值
            tmpLowerLimit: '', // 请输入报警下限温度
            tmpUpperLimit: '', // 请输入报警上限温度
            uploadInterval: '', // 请输入上传间隔
            ranchId:'',
            penId:'',
            styId:''
          }
        },
        radiolistChangeYes: [
          {
            name: '是'
          },
          {
            name: '否'
          }
        ],
        detailId:'',
        rulesTah: {
          'tahModel.collectionInterval': {
            type: 'string',
            required: true,
            message: '请填写间隔单位',
            trigger: ['blur', 'change']
          },
          'tahModel.humLowerLimit': {
            type: 'string',
            required: true,
            message: '请输入湿警下限',
            trigger: ['blur', 'change']
          },
          'tahModel.humUpperLimit': {
            type: 'string',
            required: true,
            message: '请填写湿警上限',
            trigger: ['blur', 'change']
          },
          'tahModel.id': {
            type: 'string',
            required: true,
            message: '请填写设备id',
            trigger: ['blur', 'change']
          },
          'tahModel.nickName': {
            type: 'string',
            required: true,
            message: '请填写设备名称',
            trigger: ['blur', 'change']
          },
          'tahModel.overCollectionInterval': {
            type: 'string',
            required: true,
            message: '请填写超温采集间隔',
            trigger: ['blur', 'change']
          },
          'tahModel.overUploadInterval': {
            type: 'string',
            required: true,
            message: '请填写超温上报间隔',
            trigger: ['blur', 'change']
          },
          'tahModel.quantityLimit': {
            type: 'string',
            required: true,
            message: '请填写电量告警阈值',
            trigger: ['blur', 'change']
          },
          'tahModel.tmpLowerLimit': {
            type: 'string',
            required: true,
            message: '请填写报警下限温度',
            trigger: ['blur', 'change']
          },
          'tahModel.tmpUpperLimit': {
            type: 'string',
            required: true,
            message: '请填写报警上限温度',
            trigger: ['blur', 'change']
          },
          'tahModel.uploadInterval': {
            type: 'string',
            required: true,
            message: '请填写上传间隔',
            trigger: ['blur', 'change']
          },
          'tahModel.ranchId': {
            type: 'string',
            required: true,
            message: '请选择网关',
            trigger: ['blur', 'change']
          },
          'tahModel.penId': {
            type: 'string',
            required: true,
            message: '请选择网关',
            trigger: ['blur', 'change']
          },
          'tahModel.styId': {
            type: 'string',
            required: true,
            message: '请选择网关',
            trigger: ['blur', 'change']
          }
        },
        recordsNot: {},
        enableHumLowerAlarmVal: 3,
        enableHumUpperAlarmVal: 3,
        enableQuantityAlarmVal: 3,
        enableTmpLowerAlarmVal: 3,
        enableTmpUpperAlarmVal: 3
			}
		},
		onLoad(e) {
      this.detailId = '390021799'
      // this.detailId = e.id
		},
    onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    	this.$refs.tahForm.setRules(this.rulesTah)
    },
    onShow(){
      this.getDetails()
    },
		methods: {
      submitTah(){
        let updateObj = {
          url: '/tahDevice/update',
          method: 'POST',
          data: {
            collectionInterval: parseInt(this.modelTah.tahModel.collectionInterval),
            enableHumLowerAlarm: this.enableHumLowerAlarmVal,
            enableHumUpperAlarm: this.enableHumUpperAlarmVal,
            enableQuantityAlarm: this.enableQuantityAlarmVal,
            enableTmpLowerAlarm: this.enableTmpLowerAlarmVal,
            enableTmpUpperAlarm: this.enableTmpUpperAlarmVal,
            humLowerLimit: parseInt(this.modelTah.tahModel.humLowerLimit),
            humUpperLimit: parseInt(this.modelTah.tahModel.humUpperLimit),
            id: parseInt(this.modelTah.tahModel.id),
            nickName: this.modelTah.tahModel.nickName,
            overCollectionInterval: parseInt(this.modelTah.tahModel.overCollectionInterval),
            overUploadInterval: parseInt(this.modelTah.tahModel.overUploadInterval),
            penId: parseInt(this.tagPenId),
            quantityLimit: parseInt(this.modelTah.tahModel.quantityLimit),
            ranchId: parseInt(this.tagRanchId),
            styId: parseInt(this.tagStyId),
            tmpLowerLimit: parseInt(this.modelTah.tahModel.tmpLowerLimit),
            tmpUpperLimit: parseInt(this.modelTah.tahModel.tmpUpperLimit),
            uploadInterval: parseInt(this.modelTah.tahModel.uploadInterval)
          }
        }
        request(updateObj).then(res => {
          if (res.code === '200') {
            uni.$u.toast(res.message)
            setTimeout(() => {
              uni.switchTab({
                url: './../facility/facility'
              })
            }, 500);
          } else {
            uni.$u.toast(res.message)
          }
        })
      },
      // 切换选择
      changeYes(val){
        if (val === 'a') {
          this.enableHumLowerAlarmVal = this.modelTah.tahModel.enableHumLowerAlarm === '否' ? 0 : 1
        } else if(val === 'b') {
          this.enableHumUpperAlarmVal = this.modelTah.tahModel.enableHumUpperAlarm === '否' ? 0 : 1
        } else if(val === 'c') {
          this.enableQuantityAlarmVal = this.modelTah.tahModel.enableQuantityAlarm === '否' ? 0 : 1
        } else if(val === 'd') {
          this.enableTmpLowerAlarmVal = this.modelTah.tahModel.enableTmpLowerAlarm === '否' ? 0 : 1
        } else if(val === 'e') {
          this.enableTmpUpperAlarmVal = this.modelTah.tahModel.enableTmpUpperAlarm === '否' ? 0 : 1
        } 
      },
      getDetails(){
        let options = {
          url: '/mobile/tah/detail',
          method: 'GET',
          data: {
            deviceId: this.detailId
          }
        }
        request(options).then(res => {
          this.recordsNot = res.data
          this.enableHumLowerAlarmVal = res.data.enableHumLowerAlarm
          this.enableHumUpperAlarmVal = res.data.enableHumUpperAlarm
          this.enableQuantityAlarmVal = res.data.enableQuantityAlarm
          this.enableTmpLowerAlarmVal = res.data.enableTmpLowerAlarm
          this.enableTmpUpperAlarmVal = res.data.enableTmpUpperAlarm
          res.data.enableHumLowerAlarm = res.data.enableHumLowerAlarm === 1 ? '是' : '否'
          res.data.enableHumUpperAlarm = res.data.enableHumUpperAlarm === 1 ? '是' : '否'
          res.data.enableQuantityAlarm = res.data.enableQuantityAlarm === 1 ? '是' : '否'
          res.data.enableTmpLowerAlarm = res.data.enableTmpLowerAlarm === 1 ? '是' : '否'
          res.data.enableTmpUpperAlarm = res.data.enableTmpUpperAlarm === 1 ? '是' : '否'
          this.tagRanchId = res.data.ranchId
          this.tagPenId = res.data.penId
          this.tagStyId = res.data.styId
          this.getRanchDefault('fir')
          this.getPenDefault('fir',this.tagRanchId)
          this.getStyDefault('fir',this.tagPenId)
          this.modelTah.tahModel = res.data
        })
      },
      getRanchDefault(val){
        const ranObj = {
          url: '/ranch/ranchList',
          method: 'GET',
        }
        request(ranObj).then(res => {
          if (res.code === '200') {
            this.ranchList = res.data
            if (val === 'fir') {
              let result = this.ranchList.find((item)=> {
                return this.tagRanchId === item.id
              })
              this.modelTah.tahModel.ranchId = result.name
            } else if(val === 'sen'){
              this.showRanch = true
            }
          } else {
            uni.$u.toast(res.message)
          }
        })
      },
      openPenPopup(){
        if (this.tagRanchId === '') {
          uni.$u.toast('请先选择牧场')
        } else {
          this.getPenDefault('sen')
        }
      },
      openStyPopup(){
        if (this.tagPenId === '') {
          uni.$u.toast('请先选择圈棚')
        } else {
          this.getStyDefault('sen')
        }
      },
      getPenDefault(tag,id){
        const penObj = {
          url: '/pen/penList',
          method: 'GET',
          data: {
            ranchId: id || this.tagRanchId
          }
        }
        request(penObj).then(res => {
          if (res.code === '200') {
            this.penList = res.data
            if (tag === 'fir') {
              let result = this.penList.find((item)=> {
                return this.tagPenId === item.id
              })
              this.modelTah.tahModel.penId = result.penName
            } else if(tag === 'sen'){
              this.showpen = true
            }
          } else {
            uni.$u.toast(res.message)
          }
        })
      },
      getStyDefault(tag,id){
        const penObj = {
          url: '/sty/styList',
          method: 'GET',
          data: {
            penId: id || this.tagPenId
          }
        }
        request(penObj).then(res => {
          if (res.code === '200') {
            this.styList = res.data
            if (tag === 'fir') {
              let result = this.styList.find((item)=> {
                return this.tagStyId === item.id
              })
              this.modelTah.tahModel.styId = result.styName
            } else if (tag === 'sen') {
              this.showSty = true
            }
          } else {
            uni.$u.toast(res.message)
          }
        })
      },
      ranchSelect(e){
        // console.log(e);
        this.modelTah.tahModel.ranchId = e.name
        this.tagRanchId = e.id
        this.tagPenId = ''
        this.tagStyId = ''
        this.modelTah.tahModel.penId = ''
        this.modelTah.tahModel.styId = ''
      },
      penSelect(e){
        this.modelTah.tahModel.penId = e.penName
        this.tagPenId = e.id
        this.modelTah.tahModel.styId = ''
        this.tagStyId = ''
      },
      stySelect(e){
        this.modelTah.tahModel.styId = e.styName
        this.tagStyId = e.id
      }
		}
	}
</script>

<style lang="scss" scoped>
.innerContent {
  width: 92%;
  padding: 30rpx 4% 50rpx 4%;
  height: auto;
}
.lastForSwitch {
  margin-top: 30rpx;
  width: 100%;
  display: flex;
  justify-content: center;
  .customButton {
    width: 90%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 10rpx;
    background-color: #3c9cff;
    color: #fff;
  }
}
</style>
